<template>
    <el-container style="width:100%; height:100%;">
        <el-aside style="width: 300px; min-height:100%; background-color: #263850;">
            <el-container style="width:100%; height:100%;">
                <el-header style="width:100%; height:80px; padding: 0;">
                    <div class="aside-logo" @click="activeHome">
                        <span class="aside-title">obsidian-swagger-ui</span>
                    </div>
                </el-header>
                <el-main style="width:100%; height:100%; padding: 0;">
                    <Tags></Tags>
                </el-main>
            </el-container>
        </el-aside>
        <el-container style="width:100%; height:100%;">
            <el-header style="width:100%; height:80px; padding:0 15px;">
                <el-row :gutter="0">
                    <el-col :span="16">
                        <el-tabs v-model="activeTab" style="line-height: 80px;">
                            <el-tab-pane :label="activeTab" :name="activeTab"></el-tab-pane>
                        </el-tabs>
                    </el-col>
                    <el-col :span="8">
                        <div class="search-container">
                            <el-input placeholder="search by keywords..." :clearable="true" @clear="search" v-model="searchWord">
                                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main style="width:100%; height:100%; padding:0 15px;">
                <Home v-if="active === 'Home'"></Home>
                <Paths v-else></Paths>
            </el-main>
            <el-footer style="width:100%; height:24px; padding:0">
                <div class="aside-copyright">
                    <span>Apache Licence 2.0</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>copyright ©2021-CaoRT</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>https://gitee.com/cloudladder/obsidian-swagger</span>
                </div>
            </el-footer>
        </el-container>
    </el-container>
</template>

<script>
  import { mapGetters } from 'vuex';
  import Tags from './tags';
  import Home from './home';
  import Paths from './paths';

  export default {
    name: 'index',
    data() {
      return {
        activeTab: 'Home',
        searchWord: ''
      }
    },
    computed: {
      ...mapGetters([
        'active'
      ])
    },
    watch: {
      active() {
        this.activeTab = this.active;
      }
    },
    components: { Tags, Home, Paths },
    methods: {
      activeHome() {
        this.$store.dispatch('active', 'Home');
      },
      search() {
        const keywords = this.searchWord;
        console.log(keywords);
        if (keywords !== undefined && keywords.trim() !== '') {
          this.$store.dispatch('search', keywords);
        } else {
          this.$store.dispatch('clearSearch');
        }
      }
    },
    mounted() {
      this.$store.dispatch('loadApiDocument');
    }
  }
</script>

<style scoped>
    .aside-logo {
        background: url("../assets/logo.png") no-repeat 13px/36px 36px;
        width: 300px;
        height: 80px;
        display: inline-block;
        text-align: left;
        line-height: 80px;
        float: left;
        cursor: pointer;
    }

    .aside-title {
        color: #3FD3EA;
        font-weight: bold;
        font-size: 20px;
        margin-left: 62px;
    }

    .aside-copyright {
        color: #64758E;
        line-height: 18px;
        text-align: center;
        font-size: 14px;
        margin-left: 15px;
    }

    .search-container {
        height: 78px;
        line-height: 78px;
        border-bottom: 2px solid #2f425e;
    }
</style>